<template>
    <li>
        <div @click='toggle' class="item-box" :style="{paddingLeft: number*26 + 'px'}" :class="{active: active}">
            <!--isFolder判断是否存在子级改变图标-->
            <Icon type="ios-grid" v-if='isFolder' :style="{paddingRight: '8px'}" />
            {{item[menuKeys['name']]}}
            <Icon type="ios-arrow-down" v-if="isFolder" :style="{float: 'right', transition: 'all .5s ease-out'}" :class="{iconRotate: open}" />
        </div>
        <transition name="slide-up">
            <ul v-show="open" v-if='isFolder'>
                <item v-for="(menu, index) in item[menuKeys['children']]" :key="index" :item="menu" :menuKeys="menuKeys" @clickEvent="clickEvent" :layer="number" :selectItem="selectItem"></item>
            </ul>
        </transition>
     </li>
</template>
<script>
    export default {
        name: 'item',
        props: [
            'item',
            'layer',
            'menuKeys',
            'selectItem'
            ],
        data() {
            return {
                open: false
            }
        },
        computed: {
            isFolder: function() {
                return !!this.item[this.menuKeys['children']].length;
            },
            number: function(){
                return this.layer + 1;
            },
            active: function (){
                return this.selectItem === this.item[this.menuKeys['id']];
            }
        },
        methods: {
            toggle: function() {
                if(this.isFolder) {
                    this.open = !this.open;
                } else {
                    this.$emit('clickEvent',this.item[this.menuKeys['id']]);
                }
            },
            clickEvent: function (id) {
                this.$emit('clickEvent',id);
            }
        }
    }
</script>
<style scoped>
ul {
    overflow: hidden;
    transform-origin: 0 0;
}
li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.item-box {
    position: relative;
    color: #515a6e;
    list-style-type: none;
    padding: 10px 10px 10px 0;
    font-size: 14px;
    cursor: pointer;
}
.item-box:hover {
    color: #2d8cf0;
}
.item-box.active {
    color: #2d8cf0;
    background: #f0faff;
    z-index: 2;
}
.item-box.active:after {
    content: '';
    display: block;
    width: 2px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background: #2d8cf0;
}
.iconRotate {
    transform: rotate(180deg);
}
/*动画效果*/
.slide-up-enter,
.slide-up-leave {
    animation-duration: .5s;
    animation-fill-mode: both;
    animation-play-state: running;
    animation-timing-function: ease-in-out;
}
.slide-up-enter {
    animation-name: SlideUpIn;
    opacity: 0;
}
.slide-up-leave {
    animation-name: SlideUpOut;
}
@keyframes SlideUpIn {
    0% {
        opacity: 0;
        transform-origin: 0 0;
        transform: scaleY(.8);
    }

    100% {
        opacity: 1;
        transform-origin: 0 0;
        transform: scaleY(1);
    }
}

@keyframes SlideUpOut {
    0% {
        opacity: 1;
        transform-origin: 0 0;
        transform: scaleY(1);
    }

    100% {
        opacity: 0;
        transform-origin: 0 0;
        transform: scaleY(.8);
    }
}
</style>